<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用ccs层次选择器</title>
		<style type="text/css">
			p,ul{
				border: 1px solid red;
			}
			/*后代选择器*/
			body p{
				background: orange;
			}
			/*子选择器*/
			body>p,ul{
				background: pink;
			}
			/* /* /!*相邻兄弟选择器 *！/ */
			 .active+p{
				 background: green;
			 }
			 /* 通用选择器 */
			 .aa~p{
				background: yellow;
			 }
			 li p{
				 background: purple;
			 }
			body> p:nth-child(3){
				background: green;
			 }
			 body>p:nth-of-type(3){
				 background: #0000FF;
			 }
			 /* body>ul li p:nth-of-type(2){ */
				/* background: red; */
			 }
				p[id="cc"]{
				 background: yellow;
			 }
		</style>
	</head>
	<body>
		<p class="active">1</p>
		<!-- <h2>我是标题h2</h2> -->
		<p id="bb" class="aa">2</p>
		<p>3</p>
		<!-- <h1>我是标题</h1> -->
		<ul>
			<li>
				<p>4</p>
			</li>
			<li>
				<p>5</p>
				<p id="cc">5</p>
				<p>5</p>
			</li>
			<li>
				<p>6</p>
			</li>
		</ul>
	</body>
</html>
